<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item prop="userName" label="用户名" style="width:50%">
                <el-input 
                v-model="form.userName" 
                placeholder="用户名" 
                clearable 
                ></el-input>
            </el-form-item>
            <el-form-item prop="userPhone" label="手机号" style="width:50%" >
                <el-input v-model="form.userPhone" placeholder="手机号" clearable ></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="back" icon="el-icon-back">返回</el-button>
                <el-button type="primary" @click="userAdd" icon="el-icon-success">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name:"UserInfo",
        props:{

        },
        data() {
            return {
                form:{
                    userName:'',
                    userPhone:'',
                    sex:'男'
                },
                rules:{
                    userName:[{required:true,message:"请输入用户名"}],
                    userPhone:[{required:true,message:"请输入手机号"}]
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>